<template>
  <div class="site-wrapper site-page--login">
    <div class="site-content__wrapper">
      <div class="site-content">
        <!-- 子元素 -->
        <div class="login-main">
          <div v-if="architecture" class="title-s">建筑企业证书管理系统</div>
          <!-- <el-tabs v-if="showLogin" v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="登录" name="login"> -->
              <login v-if="showLogin" :showLogin="showLogin" @registerLogin="registerLogin" @refreshShowLogin="refreshShowLogin"></login>
            <!-- </el-tab-pane> -->
            <!-- <el-tab-pane label="注册" name="register"> -->
              <register @registerEdit="registerEdit" v-if="registerA"></register>
            <!-- </el-tab-pane> -->
<!--          </el-tabs>-->
          <div v-if="retrievePassWord" style="text-align:center;">
            <h2 style="margin-bottom:40px;font-size:22px;">找回密码</h2>
            <el-form :model="recoverDataForm" :rules="dataRule" :label-position="labelPosition" ref="recoverDataForm" label-width="95px" status-icon>
              <el-form-item label="企业名称" prop="orgName">
                <el-input v-model="recoverDataForm.orgName" placeholder="请输企业名称"></el-input>
              </el-form-item>
              <el-form-item label="手机号" prop="mobile">
                <el-input v-model="recoverDataForm.mobile" placeholder="请输入手机号"></el-input>
              </el-form-item>
              <el-form-item label="验证码" prop="code">
                <el-row :gutter="20">
                  <el-col :span="13">
                      <el-input v-model="recoverDataForm.code" placeholder="请输入验证码"></el-input>
                  </el-col>
                  <el-col :span="10" class="login-captcha">
                      <el-button icon="el-icon-mobile-phone" @click="send" style="padding: 10px 15px;" :disabled="disabled=!show" >
                          <span v-show="show">获取验证码</span>
                          <span v-show="!show" class="count">{{count}} s</span>
                      </el-button>
                  </el-col>
                </el-row>
              </el-form-item>
              <el-form-item label="新密码" prop="newPassword">
                <el-input v-model="recoverDataForm.newPassword" type="password" placeholder="输入新密码"></el-input>
              </el-form-item>
              <el-form-item label="确认新密码" prop="repassword">
                <el-input v-model="recoverDataForm.repassword" type="password" placeholder="输入确认新密码"></el-input>
              </el-form-item>
              <el-form-item style="text-align: center; margin-top: 26px;">
                <el-button @click="quxiao()" style="margin-right: 26px;">取消</el-button>
                <el-button style="color: #fff;background-color:#409EFF;border-color:#409EFF;" @click="recoverDataFormSubmit()">确定</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>

      </div>
    <div class="span-s">技术支持：杭州虹合科技有限公司  浙ICP备19050189-1</div>
    </div>
    <div class="div-erweima"></div>

  </div>
</template>
<script>
import login from './login-component';
import register from './register-component'
import { getUUID } from '@/utils'
const TIME_COUNT = 60;
export default {
    data() {
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'))
        } else if (value !== this.recoverDataForm.newPassword) {
          callback(new Error('两次输入密码不一致!'))
        } else {
          callback()
        }
      }
      return {
        activeName: 'login',
        labelPosition: 'right',
        showLogin: true,
        architecture:true,
        retrievePassWord:false,
        registerA:false,
        recoverDataForm: {
          mobile:'',
          newPassword: '',
          repassword: '',
          code: '',
          uuid: ''
        },
        dataRule: {
          orgName: [
            { required: true, message: '企业名称不能为空', trigger: 'blur' }
          ],
          mobile: [
            { required: true, message: '请填写手机号', trigger: 'blur' },
         ],
          newPassword: [
            { required: true, message: '密码不能为空', trigger: 'blur' },
            { pattern: /^[a-zA-Z0-9\W_]{6,20}$/, message: '密码为数字，大小写字母，长度为6-20位' }
          ],
          repassword: [
            { required: true, validator: validatePass, trigger: 'blur' }
          ],
          code: [
            { required: true, message: '验证码不能为空', trigger: 'blur' }
          ]
        },
        captchaPath: '',
        show: true,  // 初始启用按钮
        count: '',   // 初始化次数
        timer: null,
      };
    },
    components: {
      login, register
    },
    created(){
      this.activeName = this.$route.query.activeName || 'login'
    },
    methods: {
      send(){
          if(!this.recoverDataForm.mobile || this.recoverDataForm.mobile.length != 11){
            this.$message.error("请填写正确的手机号")
            return
          }
          if (!this.timer) {
              this.count = TIME_COUNT
              this.show = false
              this.$http({
                url: this.$http.adornUrl('/sys/sendMobileCaptcha'),
                method: 'get',
                params: this.$http.adornParams({
                  'mobile': this.recoverDataForm.mobile
                })
              }).then(({data}) => {})
              this.timer = setInterval(() => {
                if (this.count > 0 && this.count <= TIME_COUNT) {
                  this.count--;
                } else {
                  this.show = true;
                  clearInterval(this.timer);  // 清除定时器
                  this.timer = null;
                }
              }, 1000)
            }
      },
      // 提交表单
      recoverDataFormSubmit () {
        this.$refs['recoverDataForm'].validate((valid) => {
          if (valid) {
            this.$http({
              url: this.$http.adornUrl('/sys/recover'),
              method: 'post',
              data: this.$http.adornData({
                'orgName': this.recoverDataForm.orgName,
                'mobile': this.recoverDataForm.mobile,
                'password': this.recoverDataForm.newPassword,
                'code': this.recoverDataForm.code
              })
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$cookie.set('token', data.token)
                this.$router.replace({ name: 'home' })
              } else {
                this.getCode()
                this.$message.error(data.msg)
              }
            })
          }
        })
      },
      handleClick(tab, event) {
        this.activeName = tab.name
      },
      // 获取验证码
      getCode () {
        this.recoverDataForm.uuid = getUUID()
        this.captchaPath = this.$http.adornUrl(`/captcha.jpg?uuid=${this.recoverDataForm.uuid}`)
      },
      refreshShowLogin(showLogin){
        this.retrievePassWord = true
        this.showLogin = showLogin
        this.architecture = showLogin
        this.getCode()
      },
      quxiao(){
        this.retrievePassWord = false
        this.showLogin = true
        this.architecture = true
      },
      registerLogin(){
        this.registerA= true
        this.showLogin= false
        this.architecture = true
      },
      registerEdit(){
        this.showLogin = true
        this.registerA = false
        this.retrievePassWord = false
      }
    }
  }
</script>

<style lang="scss" scoped>
  .site-wrapper.site-page--login {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    // background-color: rgba(38, 50, 56, .6);
    overflow: hidden;
    &:before {
      position: fixed;
      top: 0;
      left: 0;
      z-index: -1;
      width: 100%;
      height: 100%;
      content: "";
      display: flex;
      justify-content: center;
      align-items: center;
      background: url(~@/assets/img/login-s.png);
      background-size:100% 100%;
    }
    .site-content__wrapper {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      padding: 0;
      margin: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow-x: hidden;
      overflow-y: auto;
      background-color: transparent;
    }
    .site-content {
      // min-height: 100%;
      width: 80%;
      height: 85%;
      background: url(~@/assets/img/login-e.png);
      background-size:100% 100%;
      // padding: 30px 500px 30px 30px;
    }
    .span-s{
      text-align: center;
      position: fixed;
      left: 0;
      bottom:15px;
      width: 100%;
      color: #FFFFFF;
      font-size: 14px;
    }
    .brand-info {
      margin: 220px 100px 0 90px;
      color: #fff;
    }
    .brand-info__text {
      margin:  0 0 22px 0;
      font-size: 48px;
      font-weight: 400;
      text-transform : uppercase;
    }
    .brand-info__intro {
      margin: 10px 0;
      font-size: 16px;
      line-height: 1.58;
      opacity: .6;
    }
    .zhaohui{
      display: flex;
      justify-content: center;
      align-items: center;
    }
    // 子
    .login-main {
      position: absolute;
      top: 0;
      right: 0;
      // padding: 10% 5% 0 5%;
      width: 35%;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100%;
      // background-color: #fff;
      .title-s{
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 15%;
        right: 0;
        color: #178AEB;
        font-size: 26px;
        font-weight: 500;
      }
    }
    .el-tabs__item{
      font-size: 20px !important;
      font-weight: 600;
    }
    .el-tabs__nav-wrap::after{
      content:none
    }
    .el-tabs__nav{
      margin-left: 38%;
    }
    .header {
        margin-top: 110px !important;
        width:100%;
    }
    .el-col-13{
      padding-left: 0px !important;
      padding-right: 0px !important;
    }
    //    .div-erweima{
    //  width: 158px;
    //  height: 208px;
    //  background: url(~@/assets/websit/img/saomaerweima.png);
    //  background-size: 100% 100%;
    //  position: fixed;
    //  top: 300px;
    //  right: 30px;
    //}
  }
</style>
